<!--
 * @Description: 软终端 - 全局参数设置
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:29:53
 * @LastEditTime: 2021-11-11 16:26:07
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="page-content">
    <div class="info">
      <!-- 软终端参数设置 -->
      <h1 class="title">软终端参数设置</h1>
      <el-form :model="form" class="form" ref="ruleForm" label-position="top">
        <!-- 连接控制器失败时的重试时间间隔 -->
        <el-form-item
          label="连接控制器失败时的重试时间间隔"
          prop="controllerRetryInterval"
          :rules="[
          { required: true, message: '请输入时间间隔', trigger: 'blur'},
          {  min: 30, max: 60, type: 'number', message: '范围：30-60'}
        ]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model.number="form.controllerRetryInterval" :disabled="!isEdit">
              <template slot="append">秒</template>
            </el-input>
          </el-col>
        </el-form-item>
        <!-- 连接控制器失败时，最大重连次数 -->
        <el-form-item
          label="连接控制器失败时，最大重连次数"
          prop="controllerRetryTimes"
          :rules="[
          { required: true, message: '请输入最大重连次数', trigger: 'blur'},
          {  min: 3, max: 5, type: 'number', message: '范围：3-5'}
        ]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model.number="form.controllerRetryTimes" :disabled="!isEdit">
              <template slot="append">次</template>
            </el-input>
          </el-col>
        </el-form-item>
        <!-- 上报隧道信息的时间间隔 -->
        <el-form-item
          label="上报隧道信息的时间间隔"
          prop="tunnelReportInterval"
          :rules="[
          { required: true, message: '请输入时间间隔', trigger: 'blur'},
          {  min: 900, max: 1200, type: 'number', message: '范围：900-1200'}
        ]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model.number="form.tunnelReportInterval" :disabled="!isEdit">
              <template slot="append">秒</template>
            </el-input>
          </el-col>
        </el-form-item>
        <!-- 连接到Vpnserver失败时的重试时间间隔 -->
        <el-form-item
          label="连接到Vpnserver失败时的重试时间间隔"
          prop="vpnServerRetryInterval"
          :rules="[
          { required: true, message: '请输入重试时间间隔', trigger: 'blur'},
          {  min: 30, max: 60, type: 'number', message: '范围：30-60'}
        ]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model.number="form.vpnServerRetryInterval" :disabled="!isEdit">
              <template slot="append">秒</template>
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <!-- '保存' : '编辑' -->
          <el-button
            type="primary"
            style="width: 90px"
            @click="edit"
            v-power="1"
          >{{isEdit ? '保存' : '编辑'}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isEdit: false,
      form: {
        controllerRetryInterval: 30,
        controllerRetryTimes: 3,
        tunnelReportInterval: 900,
        vpnServerRetryInterval: 30
      },
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.sysConfig();
    });
  },
  methods: {
    sysConfig () {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/vpn/server/config/get'
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          if (resultBody) {
            _this.form = {
              controllerRetryInterval: resultBody.controllerRetryInterval,
              controllerRetryTimes: resultBody.controllerRetryTimes,
              tunnelReportInterval: resultBody.tunnelReportInterval,
              vpnServerRetryInterval: resultBody.vpnServerRetryInterval
            };
          }
        }
      });
    },
    edit () {
      let _this = this;
      if (_this.isEdit) {
        _this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            _this.isEdit = !_this.isEdit;
            let params = {
              controllerRetryInterval: _this.form.controllerRetryInterval,
              controllerRetryTimes: _this.form.controllerRetryTimes,
              tunnelReportInterval: _this.form.tunnelReportInterval,
              vpnServerRetryInterval: _this.form.vpnServerRetryInterval
            };
            _this.$http.post({
              url: '/api/sdwan/vpn/server/config/update',
              data: params
            }).then(res => {
              let { status } = res;
              if (status === '0') {
                _this.$message.success('设置成功！');
                _this.sysConfig();
              }
            });
          } else {
            _this.$message.error('请检查必填项!');
          }
        });
      } else {
        _this.isEdit = !_this.isEdit;
      }
    }
  },
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;

  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left-wrap {
      .avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
      }

      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }

      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }

      .task {
        margin-top: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
        }
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }

  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 40px;
      box-sizing: border-box;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .page-content {
    .header {
      padding: 20px 20px;

      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }

        h2 {
          font-size: 20px;
          margin-top: 20px;
        }

        .task {
          margin-top: 15px;

          .icon {
            width: 2.8em;
            height: 2.8em;
            vertical-align: -0.15em;
          }

          span {
            font-size: 15px;
          }
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          display: none;
        }
      }
    }

    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 30px 20px;
      }
    }
  }
}
</style>